import React, { useState } from "react";
import { MyNavBar } from "../../../components";
import style from "./style.module.scss";
import { useNavigate, useSearchParams } from "react-router-dom";
import hideIcon from "../../../assets/images/icon/hdpi/login_icon_hide_password_n.png";
import showIcon from "../../../assets/images/icon/hdpi/login_icon_show_password.png";
import { Notify } from "react-vant";
import { encryptedData, publicKey } from "../../../utils/encryptedData";
import { resetUserPwd } from "../../../api/my";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const email = searchParams.get("email") as string;
  const [type1, setType1] = useState<string>("password");
  const [pwdIcon1, setPwdIcon1] = useState<string>(hideIcon);
  const [show1, setShow1] = useState<boolean>(false);
  const [type2, setType2] = useState<string>("password");
  const [pwdIcon2, setPwdIcon2] = useState<string>(hideIcon);
  const [show2, setShow2] = useState<boolean>(false);
  const [pwd1, setPwd1] = useState<string>("");
  const [pwd2, setPwd2] = useState<string>("");

  const changeType1 = () => {
    if (!show1) {
      setType1("text");
      setPwdIcon1(showIcon);
      setShow1(true);
    } else {
      setType1("password");
      setPwdIcon1(hideIcon);
      setShow1(false);
    }
  };

  const changeType2 = () => {
    if (!show2) {
      setType2("text");
      setPwdIcon2(showIcon);
      setShow2(true);
    } else {
      setType2("password");
      setPwdIcon2(hideIcon);
      setShow2(false);
    }
  };

  const onkeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.keyCode === 13) {
      handleFinish();
    }
  };

  const handleFinish = async () => {
    if (pwd1 === pwd2) {
      const tempPwd1 = encryptedData(publicKey, pwd1) as string;
      setPwd1(tempPwd1);
      setPwd2(tempPwd1);
      const resp = await resetUserPwd(email, pwd1, pwd2);
      const { status } = resp;
      if (status === "0000") {
        navigate("/login");
      }
    } else {
      Notify.show({ type: "danger", message: "两次密码不一致" });
    }
  };

  return (
    <div className={style.forgetPassword}>
      <div className="navbar">
        <MyNavBar
          title="设置新密码"
          leftArrow
          theme="white"
          onClickLeft={() => navigate("/forgetPassword")}
        ></MyNavBar>
      </div>
      <form className={style.content}>
        <div className={style.formItem_set}>
          <input
            type={type1}
            className={style.pwdInp}
            placeholder="请设置新密码"
            name="set"
            value={pwd1}
            onChange={(e) => setPwd1(e.target.value)}
          />
          <img
            src={pwdIcon1}
            alt=""
            className={style.hideIcon}
            onClick={() => changeType1()}
          />
        </div>
        <div className={style.formItem_confirm}>
          <input
            type={type2}
            className={style.pwdInp}
            placeholder="请再次确认密码"
            name="confirm"
            value={pwd2}
            onChange={(e) => setPwd2(e.target.value)}
            onKeyDown={(e) => onkeydown(e)}
          />
          <img
            src={pwdIcon2}
            alt=""
            className={style.hideIcon}
            onClick={() => changeType2()}
          />
        </div>
      </form>
      <div className={style.shadow_one}></div>
      <div className={style.shadow_two}></div>
      <button
        type="button"
        className={style.btn_next}
        onClick={() => handleFinish()}
      >
        完成
      </button>
    </div>
  );
};

export default Index;
